<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="${springMacroRequestContext.contextPath}/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${springMacroRequestContext.contextPath}/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${springMacroRequestContext.contextPath}/jquery-easyui/themes/wu.css">
    <script type="text/javascript" src="${springMacroRequestContext.contextPath}/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${springMacroRequestContext.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
    <div style="float: left;width: 540px">
        <h1>Content Management System</h1>
    </div>
    <div style="float: right;width: 50px">
        <h2>退出</h2>
    </div>
</div>
<div data-options="region:'west',split:true,title:'菜单'" style="width:150px">
    <div class="easyui-accordion">
        <div title="快捷菜单1" data-options="iconCls:'icon-application-cascade'" style="overflow:auto;padding:5px;">
            <ul class="easyui-tree wu-side-tree">
                <li iconCls="icon-ok"><a href="javascript:void(0)" data-icon="icon-ok" data-link="${springMacroRequestContext.contextPath}/user" iframe="0">用户管理</a></li>
                <li iconCls="icon-ok"><a href="javascript:void(0)" data-icon="icon-ok" data-link="temp/layout-3.html" iframe="0">用户管理</a></li>
                <li iconCls="icon-ok"><a href="javascript:void(0)" data-icon="icon-ok" data-link="temp/layout-3.html" iframe="0">角色管理</a></li>
                <li iconCls="icon-ok"><a href="javascript:void(0)" data-icon="icon-ok" data-link="temp/layout-3.html" iframe="0">数据字典</a></li>
            </ul>
        </div>
        <div title="快捷菜单2" data-options="iconCls:'icon-application-cascade'" style="overflow:auto;padding:5px;">
            <ul class="easyui-tree wu-side-tree">
                <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="temp/layout-2.html" iframe="0">菜单导航</a></li>
                <li iconCls="icon-ok"><a href="javascript:void(0)" data-icon="icon-ok" data-link="temp/layout-3.html" iframe="0">用户管理2</a></li>
                <li iconCls="icon-ok"><a href="javascript:void(0)" data-icon="icon-ok" data-link="temp/layout-3.html" iframe="0">角色管理2</a></li>
                <li iconCls="icon-ok"><a href="javascript:void(0)" data-icon="icon-ok" data-link="temp/layout-3.html" iframe="0">数据字典2</a></li>
            </ul>
        </div>

    </div>
</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center'">
    <div id="index-tab" class="easyui-tabs" data-options="border:false,fit:true">
        <div title="首页" style="background-color: #FFFFFF">
        </div>
    </div>

</div>
<script type="text/javascript">
    $(function(){
        $('.wu-side-tree a').bind("click",function(){
            var title = $(this).text();
            var url = $(this).attr('data-link');
            var iconCls = $(this).attr('data-icon');
            var iframe = $(this).attr('iframe')==1?true:false;
            addTab(title,url,iconCls,iframe);
        });
    })

    /**
     * Name 载入树形菜单
     */
    $('#wu-side-tree').tree({
        url:'temp/menu.php',
        cache:false,
        onClick:function(node){
            var url = node.attributes['url'];
            if(url==null || url == ""){
                return false;
            }
            else{
                addTab(node.text, url, '', node.attributes['iframe']);
            }
        }
    });

    /**
     * Name 选项卡初始化
     */
    $('#index-tab').tabs({
        tools:[{
            iconCls:'icon-reload',
            border:false,
            handler:function(){
                $('#wu-datagrid').datagrid('reload');
            }
        }]
    });

    /**
     * Name 添加菜单选项
     * Param title 名称
     * Param href 链接
     * Param iconCls 图标样式
     * Param iframe 链接跳转方式（true为iframe，false为href）
     */
    function addTab(title, href, iconCls, iframe){
        var tabPanel = $('#index-tab');
        if(!tabPanel.tabs('exists',title)){
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
            if(iframe){
                tabPanel.tabs('add',{
                    title:title,
                    content:content,
                    iconCls:iconCls,
                    fit:true,
                    cls:'pd3',
                    closable:true
                });
            }
            else{
                tabPanel.tabs('add',{
                    title:title,
                    href:href,
                    iconCls:iconCls,
                    fit:true,
                    cls:'pd3',
                    closable:true
                });
            }
        }
        else
        {
            tabPanel.tabs('select',title);
        }
    }
    /**
     * Name 移除菜单选项
     */
    function removeTab(){
        var tabPanel = $('#index-tab');
        var tab = tabPanel.tabs('getSelected');
        if (tab){
            var index = tabPanel.tabs('getTabIndex', tab);
            tabPanel.tabs('close', index);
        }
    }
</script>
</body>
</html>